图标混在一起最先露馅的不是形状，是线宽差的那半像素

排期一紧，最常被推荐的一招是：别自己画图标，去成熟图标库里挑一套，全站统一调用，一个晚上页面就能显得体面很多。这个建议的道理相当扎实——同一套图标库出自同一位设计师之手，栅格尺寸、描边粗细、端点处理、圆角半径在出厂时就是对齐的，你什么都不用管，风格自然是统一的；调用上也省事，前端引一次 SVG sprite 或图标字体，后面加新页面直接写名字；换色换尺寸靠 CSS 一行搞定，不用回头找设计师重导；授权多数免费，成本接近于零。

所以在很多项目复盘里，它被排在投入产出比第一位：重排栅格要动整套稿子，重调色系要连带改按钮、标签、图表，唯独换图标是纯增量操作，改完立刻见效。这条经验在网页制作里被反复验证过，说它是最省力的品质提升手段，并不夸张。问题出在它成立的前提很少被人说出来——这套逻辑默认你需要的图标，库里全都有。

失效从第一个业务概念找不到对应图标开始

通用图标确实不缺：电话、邮箱、定位、下载、箭头、放大镜，任何一套库里都有十几种写法。但企业站真正要表达的往往不是这些。给一家注塑设备厂商做站，栏目里要出现「锁模力」「模具寿命」「注塑周期」；给医疗器械经销商做站，要出现「灭菌等级」「耗材追溯」「院内配送」。三千个图标的库摆在面前，能一对一命中的比例通常在六成左右。按一个八页企业站算，全站需要的图标大概在 45 到 70 个之间，其中业务专属的占 12 到 20 个，这十几个就是缺口。

缺口一般会被三种方式填上，三种都会破功。第一种是拿近义图标顶替，一个齿轮代表工艺、代表参数、代表定制，一页里出现三次同一个齿轮，读者会以为它们是同一个入口。第二种是去另一套库里补，风格立刻开始混。第三种是临时找人画两个交上来，画的人不知道原库的绘制参数，交付的 SVG 往往差得更远。

跨库拼凑时，最先暴露的不是形状差异

多数人以为混库的破绽在造型语言上——这套偏几何、那套偏手绘。实际盯着页面看，第一眼觉得不对劲的地方几乎都是描边粗细。常见图标库的默认值并不一致：Material Symbols 与 Tabler 在 24 栅格下走 2px，Heroicons 的线性版本是 1.5px，Feather 虽然也是 2px 但端点一律圆头。1.5 和 2 之间只差 0.5px，单看任何一个图标都挑不出毛病，可它们并排放在一行功能入口里，灰度密度就不一样了：细的那个显得虚，像没加载完；粗的那个压得住，视线会先落上去。形状上的差别反倒容易被大脑归类为「这个概念本来就长这样」，粗细不齐则会被直接读成做工粗糙。

更麻烦的是放大。有些站点把首屏的服务图标放到 40px 甚至 56px 展示，如果是等比缩放的 SVG，2px 的线到了 40px 会变成 3.33px，视觉上从清秀直接变粗笨，而旁边 24px 的导航图标还维持在 2px，同一个图标在两个位置像是两个东西。这类问题在网页制作交付阶段很少被写进反馈单，客户只会给一句「感觉不够精致」，谁也说不清具体指哪儿。

就算全用同一套库，光学面积也会让它塌

同库不代表同视重。一个正方形图标和一个正圆图标同时填满 24×24 的栅格，圆的实际墨量少了约两成，看上去就是矮一圈、轻一档。成熟图标库内部会做光学补偿：方形主体控制在 20×20，圆形放大到 22，纵向长条做成 20 宽 24 高。但很多人从库里导出时只勾了「按 24 导出」，补偿信息在导出环节丢掉，或者混入了自绘图标没做补偿，一排六个功能入口里那两个圆形图标就会显得往下沉。网页制作中这类偏差不会触发任何报错，只能靠人眼在成排对照时发现。

换个顺序：先立六条规则，再决定哪些能直接用

把「挑库」这一步往后放，先把规则定死，库只是备选素材。六条足够覆盖绝大多数企业站：一是画布统一 24×24，四周留 2px 安全边，实际绘制区 20×20；二是线宽全站只允许一个值，正文 16px 的站点取 2px，字号偏小的取 1.5px，并且放大展示时线宽不参与缩放，40px 尺寸下仍写 2px 或最多 2.5px；三是端点一律圆头，拐角统一 2px 圆角，不与直角混用；四是光学面积按方形 20、圆形 22、横条 20×14 校准；五是线性与面性二选一作为主风格，面性只保留给选中态和当前页高亮；六是全部导出为 SVG 并把 fill 改成 currentColor，颜色交给样式表控制，避免出现导出时写死的深灰在深色区块上看不见。

规则立完再回头挑库，判断标准就变得很具体：这套库的栅格是不是 24、默认线宽是不是 2、端点是不是圆头。命中的直接用，差一项的批量改，差三项以上的整套弃掉。这一步在网页制作流程里放在设计中期比放在收尾要划算得多，收尾时再改，意味着已经进了页面的图标要重新导一遍、重新替换一遍。

缺掉的业务图标，用基本形拼比重画快

补齐那十几个业务图标，不必真的从零画。可行的办法是把业务概念拆成库里已有的基本形加角标：「模具寿命」用层叠方块加右下角时钟；「耗材追溯」用包装盒加折线箭头；「院内配送」用建筑轮廓加推车。角标固定放右下角，尺寸 10×10，与主体之间留 1px 的空隙作为断白，避免两条线糊在一起。角标的线宽和主体保持一致，不要为了塞进去而减细。这套拼法熟练之后，五个图标大概 20 到 30 分钟能出完，且天然继承了原库的绘制参数，比外包临时画更容易对齐。

上线前把全站图标铺到一张画布上看一遍

自查的动作很简单，但顺序不能省。把项目里用到的全部图标导出来，按每行八个铺成网格，先统一放到 24px 看一遍，再统一放到 40px 看一遍；然后把背景依次换成白、浅灰和深色各看一遍。线宽不齐的、光学面积没校准的、导出时写死了颜色的，在这张图上一眼就能挑出来，比在页面里逐个找快十倍。顺带清点数量：一个八页企业站如果图标总数超过 80 个，基本可以断定存在语义重复，把意思相近的合并掉，压到 50 到 60 个，维护成本和视觉噪音会同时降下来。

那条建议在什么范围内依然是对的

如果站点只有五个页面以内，图标数量不超过 12 个，而且全是电话、邮箱、地址、二维码、箭头、下载这类通用概念，那么直接挑一套库套上去仍然是最优解，上面这一整套规范反而是过度设计，花掉的时间换不回等值的观感提升。分界线大致可以按两个数字判断：图标总数 20 个、业务专属图标占比 30%。两个都在线下，套库；任意一个越线，就得先立规则再选素材，这是网页制作里少数越早决定越省钱的环节。工期实在压得死的项目还有一个折中办法——先按库交付上线，同时把这六条规则写进文档，等二期做内容扩充时一次性替换，届时替换的成本主要在导出和替换动作本身，规则争议已经在一期解决掉了。